<!--
  * @Description: 招聘-职位管理
  * @Author: rcc
  * @Date: 2024-08-13 09:31:25
  * @FilePath: /rc-recruitment/pages/office/manage/manage.vue
-->

<template>
	<view class="p-h24">
		<view class="p-v32 text-700-130 text-c">已发布的岗位</view>
		<up-empty mode="list" v-if="!list.length"></up-empty>
		<view
			v-for="item in list"
			:key="item.id"
			class="card"
			:data-url="`pages/office/position/position?id=${item.id}`"
			@click="goto"
		>
			<view
				class="relative flex-d-sb h-196 p-h30 p-v20"
				:class="[{ close: item.status === '2' }]"
			>
				<view class="flex overflow-hidden">
					<text class="flex-1 text-700-130 truncate"
						>{{ item.title }}【{{ getNature(item.xingzhi) }}】</text
					>
					<image
						class="square-40"
						:src="`/static/images/mine/${
							item.status === '2' ? 'edit-2' : 'edit'
						}.png`"
						mode="aspectFit"
						@click.stop.prevent="openActionSheet(item)"
					/>
				</view>
				<text class="text-400-326"
					>{{ item.city }} · {{ item.area }} | {{ item.lowest_education }} |
					{{ getWorkTimesLabel(item.work_year) }} | 招{{
						item.people_num
					}}人</text
				>
				<view class="flex">
					<text class="flex-1 text-400-326"
						>薪资范围：{{ item.money_range }}</text
					>
					<text class="text-400-326">{{
						timeFormat(item.createtime * 1000, "yyyy/mm/dd")
					}}</text>
				</view>
			</view>

			<view class="card-bottom flex h-80 p-h30">
				<text class="flex-1 text-400-326"
					>候选人<text class="text-700-530">{{ item.candidates }}</text></text
				>
				<text class="flex-1 text-400-326 text-c"
					>已面试<text class="text-700-530">{{ item.interviewed }}</text></text
				>
				<text class="flex-1 text-400-326 text-r"
					>已招聘<text class="text-700-530">{{
						item.recruited || "0"
					}}</text></text
				>
			</view>
		</view>

		<view class="panel-view">
			<view class="fixed-view flex-r">
				<!-- <view class="button text-700-228">停止招聘</view> -->
				<view
					id="btn"
					class="button add flex text-700-228"
					data-url="pages/office/release/release"
					@click="goto"
				>
					<image class="square-24" src="@/static/images/office/add.png" />
					<text class="m-l10">新增岗位</text>
				</view>
			</view>
		</view>
		<up-action-sheet
			:actions="actions"
			cancelText="取消"
			closeOnClickOverlay
			closeOnClickAction
			round="20rpx"
			:show="showActionSheet"
			@close="showActionSheet = false"
			@select="onActionSheetSelect"
		/>
	</view>
</template>

<script lang="ts" setup>
import { defineExpose, ref } from "vue";
import { useNavigator } from "@/hooks/use-navigator";
import { timeFormat } from "@/utils/utils";
import { TFirmPosition } from "@/types/api.d";
import { onReachBottom } from "@dcloudio/uni-app";
import { useCommonStore } from "@/stores/user";
const { getWorkTimesLabel } = useCommonStore();
type ActionItem = {
	name: string;
	type: "open" | "close" | "del";
};

const { goto } = useNavigator();

const actions = ref<ActionItem[]>([]);
const showActionSheet = ref(false);
const selectedPosition = ref<TFirmPosition | null>(null);
const list = ref([]);
async function getList() {
	const res = await uni.$u.get<TFirmPosition[]>("/position/mylst");
	console.log(res, 122);
	list.value = res.data;
}
getList();

const getNature = (type: number) => {
	const obj = {
		1: "全职",
		2: "兼职",
		3: "实习",
	};

	return obj[type as keyof typeof obj] ?? "";
};

const openActionSheet = (data: TFirmPosition) => {
	selectedPosition.value = data;

	const isClose = data.status === "2";
	actions.value = [
		{ name: "编辑岗位", type: "edit" },
		{
			name: isClose ? "开启招聘" : "关闭招聘",
			type: isClose ? "open" : "close",
		},
		{ name: "删除岗位", type: "del" },
	];

	showActionSheet.value = true;
};

const onActionSheetSelect = async (action: ActionItem) => {
	const cur = actions.value.find((ac) => ac.type === action.type);
	if (cur?.type === "edit") {
		uni.navigateTo({
			url: `/pages/office/release/release?id=${selectedPosition.value!.id}`,
		});
	} else {
		const url = cur!.type === "del" ? "/position/del" : "/position/edit";
		const res = await uni.$u.post(url, {
			id: selectedPosition.value!.id,
			// 职位状态 1开启 2关闭
			status: cur!.type === "open" ? 1 : 2,
		});
		if (res.code === 1) {
			uni.showToast({ title: "操作成功" });
			getList();
		}
	}
};
//触底了
onReachBottom(() => {
	console.log("触底了");
});
defineExpose({ getList });
</script>

<style lang="scss">
page {
	background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.card {
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	background-color: $bg-color-1;
	overflow: hidden;

	.close {
		&::after {
			content: "";
			position: absolute;
			right: 0;
			top: 50%;
			width: 196rpx;
			height: 196rpx;
			background: url(@/static/images/mine/icon-6.png) no-repeat center;
			background-size: contain;
			transform: translateY(-50%);
			pointer-events: none;
		}
	}

	.card-bottom {
		background-color: rgba(76, 140, 252, 0.1);
	}
}

.panel-view {
	height: 140rpx;

	.fixed-view {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		padding: 0 24rpx;
		background-color: $bg-color-1;
	}

	.button {
		height: 80rpx;
		padding: 0 40rpx;
		margin-left: 20rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		background-color: #646464;
	}

	.add {
		background-color: $bg-color-2;
	}
}
</style>
